<template>
    <div class="pages_content table">
        <el-container>
            <el-header>
                <breaDcrumb />
            </el-header>
            <el-main style="display: flex;">
                <div style="width: 100%;">
                    <div style="padding: 20px 10px;height:calc(100% - 0px)">
                        <el-row style="height:100%">
                            <el-col :span="6" style="height:100%">
                                <!-- 添加修改图例 -->
                                <div class="left-area">
                                    <div style="height:50px">
                                        <el-button size="small" class="bottom_all" style="margin-left: 0" @click="add()">
                                            <i class="icon iconfont iconicon_button_add" style="font-size: 12px"></i>
                                            添加
                                        </el-button>
                                    </div>
                                    <div class="echarts scroll">
                                        <div style="padding-right:5px">
                                            <div v-for=" (item,index) in Echarts" :id="'left'+index" :key="index" class="echarts_item" draggable="true" @dragstart="dragstart($event,index)" @click.stop="update(item,index)">
                                                <div v-if="item.graphicalCss=='table-basic'">
                                                    <Table :data="item"></Table>
                                                </div>
                                                <div v-else>
                                                    <Echart1 :key="index==timeindex?time:''" :data="item" :name="'left'+index"></Echart1>
                                                </div>
                                            </div>
                                        </div>

                                    </div>
                                </div>
                            </el-col>
                            <el-col :span="18" style="height:100%">
                                <div style="padding-left: 10px;height:100%">
                                    <div class="pull-right">
                                        <div style="height:50px">
                                            <el-button size="small" class="bottom_all_two" @click="exit()">
                                                返回
                                            </el-button>
                                            <el-button size="small" class="bottom_all" @click="addedit()">
                                                <i class="icon iconfont iconicon_button_add" style="font-size: 12px"></i>
                                                保存
                                            </el-button>
                                        </div>
                                    </div>
                                    <div style="height:50px;"></div>
                                    <div id="edit_flex" ref="edit_flex" class="edit_flex" @dragenter="dragenter($event)" @drag="drop($event)" @dragover="dragover($event)" @dragleave="dragleave($event)">
                                        <template v-for=" (item,index) in Echarts1">
                                            <VueDragResize :key="index" :isActive="true" :w="item.htmlCss.w" :h="item.htmlCss.h" :x="item.htmlCss.left" :y="item.htmlCss.top" @resizestop="resize($event,index)" @dragstop="resize1($event,index)">
                                                <i class="el-icon-circle-close" style=" position: absolute;right:0;font-size:20px" @click="delEcharts1(item.id)"></i>
                                                <div class="echarts_item1" :style="style(item.htmlCss)">
                                                    <div v-if="item.graphicalCss=='table-basic'">
                                                        <Table :data="item"></Table>
                                                    </div>
                                                    <div v-else>
                                                        <Echart1 :key="index==timeindex1?time:flexTime" :data="item" :show="item.dataField.Ydata.length>3?false:true" :name="'right'+item.id"></Echart1>
                                                    </div>
                                                </div>
                                            </VueDragResize>
                                        </template>

                                    </div>
                                </div>

                            </el-col>
                        </el-row>
                    </div>
                </div>
            </el-main>
        </el-container>

        <!-- 调整面板 -->
        <el-dialog v-dialogDrag :visible.sync="addDialog" width="1180px" :close-on-click-modal="false">
            <span slot="title" class="dialog-title">调整面板</span>
            <div class="dialogR_botton">
                <el-form ref="refformData" :model="formData" label-width="110px" :inline="true" :rules="rules">
                    <el-form-item label="选择数据源：" prop="sourceId">
                        <el-select v-model="formData.sourceId" style="width:160px;" placeholder="请选择" @change="changeDataSourceId">
                            <el-option v-for=" (item, index1) in dataSourceList" :key="index1" :label="item.sourceName" :value="item.sourceId">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="图形样式：" prop="graphicalCss">
                        <el-select v-model="formData.graphicalCss" style="width:160px;" placeholder="请选择">
                            <el-option v-for="(item) in dataCssList" :key="item.key" :label="item.name" :value="item.key"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="标题：" prop="title">
                        <el-input v-model="formData.title" style="width:160px;" placeholder="请输入"></el-input>
                    </el-form-item>
                    <el-form-item v-if="isTable!==0" label="x数据：">
                        <el-select ref="selecta" v-model="formData.dataField.Xdata.data" style="width:160px;" placeholder="请选择" @change="change1(formData.dataField.Xdata,'a')">
                            <el-option v-for="(item, index) in dataSettings.fieldList" :key="index" :label="item.customFieldName" :value="item.fieldName"></el-option>
                        </el-select>
                    </el-form-item>
                    <div v-if="isTable!==0" class="conf-area">
                        <template v-for="(item,index) in formData.dataField.Ydata">
                            <el-form-item :key="index" label="y数据：">
                                <el-select :ref="'select'+index" v-model="item.data" style="width:160px;" placeholder="请选择" @change="change1(item,index)">
                                    <el-option v-for="(item, index) in dataSettings.fieldList" :key="index" :label="item.customFieldName" :value="item.fieldName"></el-option>
                                </el-select>
                            </el-form-item>
                        </template>
                        <el-button size="small" class="bottom_all" style="margin-left: 0" @click="addYdata()">
                            <i class="icon iconfont iconicon_button_add" style="font-size: 12px"></i>
                            添加Y数据
                        </el-button>
                        <el-button size="small" class="bottom_two" @click="delYdata()">
                            <i class="icon iconfont iconicon_button_delete" style="font-size: 12px"></i>
                            删除Y数据
                        </el-button>
                    </div>
                </el-form>
                <div v-if="isTable==0" class="chart_area1">
                    <Table :data="formData"></Table>
                </div>
                <div v-else-if="isTable==1" class="chart_area">
                    <Echart :data="formData"></Echart>
                </div>
                <div v-else class="chart_area"></div>
                <div v-if="isTable==1" class="color">
                    <div class="title">选择颜色</div>
                    <div class="colors">
                        <div v-for="(item,index) in colors" :key="index" class="items">
                            <div class="item" :active="index==formData.graphicalCssCode" @click="chooseColor(item,index)">
                                <div v-for="(item1,index1) in item" :key="index1" :style="'background:'+item1">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <span slot="footer" class="dialog-footer">
                <el-button class="bottom_all_two" @click="addDialog=false">取 消</el-button>
                <el-button class="bottom_all" style="margin-left: 24px" @click="submit()">保 存</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import {
    save_or_update,
    get_source_list,
    source_page,
    get_detail as get_flex,
    htmlsave_or_update as set_flex,
    update_publish_status
} from "@/api/board/datashow.js";
import breaDcrumb from '@/components/breadcrumb';
import Table from './components/table.vue';
import Echart from './components/echart.vue';
import Echart1 from './components/echart1.vue';
import {
    get_detail
} from "@/api/board/datasource.js";
import VueDragResize from 'vue-drag-resize'
import { _debounce } from '@/utils/utils.js'
import addTab from "@/common/addTab.js";
var dragstatus = false;
var Echarts1_item
var dataTransfer
var EchartsData
export default {
    components: {
        breaDcrumb,
        Table,
        Echart,
        Echart1,
        VueDragResize
    },
    data() {
        return {
            /**图标类型*/
            dataCssList: [
                {
                    name: '柱状图（簇状柱）',
                    key: 'bar-basic',
                    desc: '需要配置x轴，多个Y轴'
                },
                {
                    name: '柱状图（堆积柱）',
                    key: 'bar-stack',
                    desc: '需要配置x轴，多个Y轴'
                },
                {
                    name: '条形图',
                    key: 'bar-y',
                    desc: '需要配置x轴，多个Y轴'
                },
                {
                    name: '折线图',
                    key: 'line-basic',
                    desc: '需要配置x轴，多个Y轴'
                },
                {
                    name: '饼状图（饼状）',
                    key: 'pie-basic',
                    desc: '需要配置维度名称，多个值'
                },
                {
                    name: '饼状图（环状）',
                    key: 'pie-ring',
                    desc: '需要配置维度名称，多个值'
                },
                {
                    name: '散点图',
                    key: 'scatter-basic',
                    desc: '需要配置x轴和Y轴'
                },
                {
                    name: '面积图',
                    key: 'area-basic',
                    desc: '需要配置一个x，多个Y'
                },
                {
                    name: '组合图(簇状柱)',
                    key: 'constitution-basic',
                    desc: '柱状 + 折线，x一个，Y多个'
                },
                {
                    name: '表格',
                    key: 'table-basic',
                    desc: '需要选择数据列'
                }
            ],
            /**数据源列表*/
            dataSourceList: [],
            /**数据源详情*/
            dataSettings: [],
            /**规则验证*/
            rules: {
                sourceId: [{ required: true, message: "请选择数据源", trigger: "change" }],
                graphicalCss: [{ required: true, message: "请选择图形样式", trigger: "change" }],
                title: [{ required: true, message: "请选择数据列表", trigger: "blur" }],
            },
            /**新图例配置*/
            formData: {
                sourceId: '',
                graphicalCss: '',
                dataField: {
                    Xdata: { data: '', name: '' },
                    Ydata: [{ data: '', name: '' }],
                },
                title: '',
                functionId: '',
                graphicalCssCode: '',
                executeSql: '',
                colorCss: ['#58D5FF', '#73ACFF', '#FDD56A', '#FDB36A', '#FD866A', '#9E87FF']
            },
            /**颜色选择*/
            colors: [
                ['#58D5FF', '#73ACFF', '#FDD56A', '#FDB36A', '#FD866A', '#9E87FF'],
                ['#9E87FF', '#FD866A', '#FDD56A', '#FDB36A', '#FD866A', '#9E87FF'],
                ['#58D5FF', '#73ACFF', '#FDD56A', '#FDB36A', '#FD866A', '#FD866A'],
                ['#58D5FF', '#73ACFF', '#FDD56A', '#FDB36A', '#FD866A', '#9E87FF'],
                ['#58D5FF', '#73ACFF', '#FDD56A', '#FDB36A', '#FD866A', '#9E87FF'],
                ['#58D5FF', '#73ACFF', '#FDD56A', '#FDB36A', '#FD866A', '#9E87FF'],
                ['#58D5FF', '#73ACFF', '#FDD56A', '#FDB36A', '#FD866A', '#9E87FF'],
                ['#58D5FF', '#73ACFF', '#FDD56A', '#FDB36A', '#FD866A', '#9E87FF'],
                ['#58D5FF', '#73ACFF', '#FDD56A', '#FDB36A', '#FD866A', '#9E87FF'],
                ['#58D5FF', '#73ACFF', '#FDD56A', '#FDB36A', '#FD866A', '#9E87FF'],
                ['#58D5FF', '#73ACFF', '#FDD56A', '#FDB36A', '#FD866A', '#9E87FF'],
                ['#58D5FF', '#73ACFF', '#FDD56A', '#FDB36A', '#FD866A', '#9E87FF'],
                ['#58D5FF', '#73ACFF', '#FDD56A', '#FDB36A', '#FD866A', '#9E87FF'],
                ['#58D5FF', '#73ACFF', '#FDD56A', '#FDB36A', '#FD866A', '#9E87FF'],
                ['#58D5FF', '#73ACFF', '#FDD56A', '#FDB36A', '#FD866A', '#9E87FF'],
                ['#58D5FF', '#73ACFF', '#FDD56A', '#FDB36A', '#FD866A', '#9E87FF'],
                ['#58D5FF', '#73ACFF', '#FDD56A', '#FDB36A', '#FD866A', '#9E87FF'],
                ['#58D5FF', '#73ACFF', '#FDD56A', '#FDB36A', '#FD866A', '#9E87FF'],
                ['#58D5FF', '#73ACFF', '#FDD56A', '#FDB36A', '#FD866A', '#9E87FF'],
                ['#58D5FF', '#73ACFF', '#FDD56A', '#FDB36A', '#FD866A', '#9E87FF'],
            ],
            //  colorindex: 0,
            /**判断是table还是eChart\
             * 0 :表格    1：eChart  3：占位
            */
            isTable: 0,
            addDialog: false,
            updateType: false,
            time: new Date().getTime(),
            timeindex: null,
            timeindex1: null,
            /**图例
             * 0 :表格    1：eChart  3：占位
            */
            fromData: {
                page: 1,
                pageSize: 9999
            },
            Echarts: [],
            /**拖动*/
            // dataTransfer: null,
            Echarts1: [],
            // Echarts1_item: '',
            delstatus: false,
            flexId: '',
            flexTime: null,
        };
    },
    async created() {
        /**获取数据源列表*/
        await get_source_list({ functionId: this.$route.query.functionId }).then(res => {
            this.dataSourceList = res.data
        })
        await this.getEcharts()
    },
    mounted() {
        let _this = this
        /**获取数已保存图例列表*/
        document.addEventListener("drop", function () {
            _this.$nextTick(() => {
                if (dragstatus) {
                    dragstatus = false
                    let box = _this.$refs.edit_flex || document.getElementById('edit_flex')
                    // const box = document.getElementById('edit_flex')
                    box.classList.remove('edit_flex_active')
                    console.log('原图例列表', EchartsData)
                    console.log('新加入图例', Echarts1_item.id)
                    if (EchartsData.findIndex(res => (Echarts1_item.id == res.id)) !== -1) {
                        _this.$message({
                            message: '此图例已存在',
                            type: 'warning'
                        });
                        return
                    }
                    update_publish_status({ id: Echarts1_item.id, publishStatus: 1 }).then(res => {
                        if (res.code == 1001) {
                            EchartsData.push(Echarts1_item)
                            _this.timeindex1 = EchartsData.length - 1
                            _this.$message({
                                message: '恭喜你，图例保存成，如无样式请刷新页面',
                                type: 'success'
                            })
                            _this.Echarts1 = JSON.parse(JSON.stringify(EchartsData))
                            console.log('新图例列表', _this.Echarts1)
                            setTimeout(function () {
                                _this.time = new Date().getTime()
                                Echarts1_item = ''
                            }, 100)
                        }
                    })
                }
            })
        });
    },
    watch: {
        /**判断数据
         * 弹窗打开时，为表格不用验证X，Y轴数据
         * 弹窗打开时，不为表格，验证X，Y轴数据，Y轴至少保证有一条数据即可
        */
        formData: {
            handler() {
                let low = this.formData
                if (this.addDialog) {
                    if (!this.updateType) {
                        this.formData.functionId = this.$route.query.functionId
                        this.formData.executeSql = this.dataSettings.executeSql
                    }
                    if (this.formData.graphicalCss === 'table-basic') {
                        this.isTable = 0
                        return
                    }
                    if (low.graphicalCss && low.dataField.Xdata.data && low.dataField.Ydata.length !== 0 && low.dataField.Ydata[0].data) {
                        this.isTable = 1
                        return
                    }
                    this.isTable = 3
                }
            },
            deep: true,
            immediate: true,
        }
    },
    methods: {
        /**
         * 添加修改弹窗
         * 
        */
        /**添加Y轴数据*/
        addYdata() {
            if (this.formData.dataField.Ydata.length > 6) {
                this.$message({
                    message: '警告哦，最多添加7条Y轴数据',
                    type: 'warning'
                });
                return
            }
            this.formData.dataField.Ydata.push({ data: '', name: '' })
        },
        /**删除Y轴数据*/
        delYdata() {
            if (this.formData.dataField.Ydata.length < 2) {
                this.$message({
                    message: '警告哦，至少有1条Y轴数据',
                    type: 'warning'
                });
                return
            }
            this.formData.dataField.Ydata.splice(this.formData.dataField.Ydata.length - 1, 1)
        },
        /**获取数据源详情*/
        changeDataSourceId(e) {
            this.formData.dataField = {
                Xdata: { data: '', name: '' },
                Ydata: [{ data: '', name: '' }],
            }
            get_detail({ id: e }).then(res => {
                this.dataSettings = res.data
            })
        },
        /**获取X,Y的Label名*/
        change1(low, index) {
            this.$nextTick(() => {
                if ('select' + index == 'selecta') {
                    low.name = this.$refs['select' + index].selectedLabel
                } else {
                    low.name = this.$refs['select' + index][0].selectedLabel
                }
            })
        },
        /**选择颜色*/
        chooseColor(color, index) {
            this.formData.colorCss = color
            this.formData.graphicalCssCode = index
        },
        /**添加时获取数据源并获取echarts的位置*/
        add() {
            this.formData = this.$options.data().formData
            this.addDialog = true;
            this.updateType = false
            setTimeout(() => {
                this.$refs.refformData.clearValidate();
            }, 10)
        },
        async  update(item, index) {
            this.formData = JSON.parse(JSON.stringify(item))
            this.addDialog = true;
            this.updateType = true
            this.timeindex = index
            await get_detail({ id: this.formData.sourceId }).then(res => {
                this.dataSettings = res.data
            })
            setTimeout(() => {
                this.$refs.refformData.clearValidate();
            }, 10)
        },
        /**保存数据源图例配置*/
        submit() {
            let data = {
                dataField: JSON.stringify(this.formData.dataField),
                colorCss: JSON.stringify(this.formData.colorCss),
                executeSql: this.formData.executeSql,
                functionId: this.formData.functionId,
                graphicalCss: this.formData.graphicalCss,
                graphicalCssCode: this.formData.graphicalCssCode,
                sourceId: this.formData.sourceId,
                title: this.formData.title
            }
            if (this.updateType) {
                data.id = this.formData.id
            }
            save_or_update(data).then(() => {
                this.addDialog = false
                this.getEcharts()
            })
        },
        /**
         * 页面
        */
        /**获取已经保存的图例*/
        async   getEcharts() {
            let _this = this
            let flex = []
            let flexData = []
            _this.fromData.functionId = _this.$route.query.functionId
            await source_page(_this.fromData).then(res => {
                res.data.data.forEach(res => {
                    res.dataField = JSON.parse(res.dataField)
                    res.colorCss = JSON.parse(res.colorCss)
                })
                _this.Echarts = res.data.data
                flexData = JSON.parse(JSON.stringify(res.data.data)).filter(res => (res.publishStatus == 1))
            })
            await   /**获取布局*/
                get_flex({ functionId: _this.$route.query.functionId }).then(res => {
                    _this.flexId = res.data.id
                    flex = JSON.parse(res.data.htmlCss)
                })
            _this.Echarts1 = flexData.map(res => {
                let obj = {
                    ...res,
                    htmlCss: _this.figure(flex.find(item => (res.id == item.id)) ?.htmlCss)
                }
                return obj
            })
            EchartsData = JSON.parse(JSON.stringify(_this.Echarts1))
            console.log('首次图例列表', _this.Echarts1)
            _this.$nextTick(() => {
                _this.time = new Date().getTime()
                _this.flexTime = new Date().getTime()
            })
        },
        /**拖懂开始*/
        dragstart(e, index) {
            e.dataTransfer.setData("Text", event.target.id);
            dataTransfer = index
        },
        /**拖拽进入目标元素*/
        dragenter() {
            let box = this.$refs.edit_flex
            box.classList.add('edit_flex_active')
        },
        /**拖拽离开目标元素*/
        dragleave() {
            let box = this.$refs.edit_flex
            box.classList.remove('edit_flex_active')
        },
        /**目标元素里移动*/
        dragover(e) {
            let data = {
                left: e.offsetX,
                top: e.offsetY,
                h: 300,
                w: 400,
            }
            Echarts1_item = { ...this.Echarts[dataTransfer], htmlCss: data }
            dragstatus = true
            e.preventDefault();
        },
        /**调整大小*/
        resize: _debounce(function (e, b) {
            console.log(b)
            let _this = this
            _this.timeindex1 = b
            _this.Echarts1[b].htmlCss.left = e.left
            _this.Echarts1[b].htmlCss.top = e.top
            _this.Echarts1[b].htmlCss.w = e.width
            _this.Echarts1[b].htmlCss.h = e.height
            _this.$nextTick(() => {
                _this.time = new Date().getTime()
            })
            // setTimeout(function () {
            //     _this.time = new Date().getTime()
            // }, 200)
        }, 100),
        /**移动*/
        resize1: _debounce(function (e, b) {
            let _this = this
            if (!_this.delstatus) {
                _this.Echarts1[b].htmlCss.left = e.left
                _this.Echarts1[b].htmlCss.top = e.top
                _this.Echarts1[b].htmlCss.w = e.width
                _this.Echarts1[b].htmlCss.h = e.height
            }
        }, 100),
        /**目标元素位置计算*/
        style() {
            return `height:100%;width:100%;`
        },
        /**删除发布*/
        delEcharts1(index) {
            let _this = this
            _this.delstatus = true
            let a = EchartsData.findIndex(res => (res.id == index))
            update_publish_status({ id: index, publishStatus: 0 }).then(res => {
                if (res.code == 1001) {
                    EchartsData.splice(a, 1)
                    console.log('删除后图例列表', EchartsData)
                    _this.Echarts1 = JSON.parse(JSON.stringify(EchartsData))
                    setTimeout(function () {
                        _this.delstatus = false
                    }, 200)
                }
            })

        },
        /**保存样式布局数据*/
        addedit() {
            let _this = this
            let htmlCss = JSON.stringify(_this.Echarts1.map(res => ({ htmlCss: _this.percent(res.htmlCss), id: res.id })))
            let data = {
                functionId: this.$route.query.functionId,
                htmlCss: htmlCss,
            }
            if (_this.flexId) {
                data.id = _this.flexId
            }
            set_flex(data).then(res => {
                if (res.code == 1001) {
                    _this.$message({
                        message: '保存成功',
                        type: 'success'
                    });
                    addTab.$emit("remove", 'editBoard');
                    _this.$router.push({ name: "board_Salesofkanban", query: { functionId: this.$route.query.functionId } });
                }
            })

        },
        /**返回看板*/
        exit() {
            addTab.$emit("remove", 'editBoard');
            this.$router.push({ name: "board_Salesofkanban", query: { functionId: this.$route.query.functionId } });
        },
        /**样式转百分比，全屏*/
        percent(e) {
            let _this = this
            let box = _this.$refs.edit_flex
            let w = box.offsetWidth
            let h = box.offsetHeight
            let obj = {
                h: (e.h / h).toFixed(6),
                left: (e.left / w).toFixed(6),
                top: (e.top / h).toFixed(6),
                w: (e.w / w).toFixed(6),
            }
            return obj
        },
        /**百分比转像素*/
        figure(e) {
            let _this = this
            let a = e ?? { h: Math.random() * 0.5, left: Math.random() * 0.5, top: Math.random() * 0.5, w: Math.random() * 0.5 }
            let box = _this.$refs.edit_flex
            let w = box.offsetWidth
            let h = box.offsetHeight
            let obj = {
                h: Number((Number(a.h) * h).toFixed(2)),
                left: Number((Number(a.left) * w).toFixed(2)),
                top: Number((Number(a.top) * h).toFixed(2)),
                w: Number((Number(a.w) * w).toFixed(2)),
            }
            return obj
        },
    },
    // beforeDestroy() {
    //     addTab.$emit("remove", 'editBoard');
    // },
};
</script>

<style lang="scss" scoped>
.pull-right {
  float: right;
}
.left-area {
  min-height: 600px;
  border-right: 1px solid #ddd;
  padding-right: 10px;
  height: 100%;
  .echarts {
    height: calc(100% - 50px);
    width: 100%;
    overflow: auto;
    .echarts_item {
      margin: 10px 5px 0 0;
      width: 100%;
      height: 300px;
      border-radius: 4px;
      border: 1px solid #ddd;
      padding: 10px;
      > div {
        width: 100%;
        height: 100%;
      }
    }
  }
}
.edit_flex {
  height: calc(100% - 50px);
  width: 100%;
  border: 1px solid #f2f2f2;
  border-radius: 4px;
  position: relative;
  overflow: hidden;
}
.edit_flex_active {
  border: 1px solid rgba($color: #3980ff, $alpha: 0.8);
  box-shadow: 0 0 6px 0 #3980ff;
}
.echarts_item1 {
  // position: absolute;
  border-radius: 4px;
  border: 1px solid #ddd;
  padding: 10px;
  > div {
    width: 100%;
    height: 100%;
  }
}
.chart_area1 {
  height: 400px;
  width: 100%;
}
.chart_area {
  height: 400px;
  width: 70%;
  display: inline-block;
}
.color {
  height: 400px;
  float: right;
  width: 25%;
  border: 1px solid #ddd;
  .title {
    font-weight: bold;
    color: #000;
    text-align: center;
    line-height: 50px;
  }
  .colors {
    width: 100%;
    height: calc(100% - 50px);
    overflow: auto;
    padding: 0 20px;
    .items {
      .item {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 30px;
        cursor: pointer;
        > div {
          margin: 0 10px 0 0;
          width: 20px;
          height: 20px;
          border-radius: 4px;
        }
        opacity: 0.5;
      }
      .item:hover {
        opacity: 1;
      }
      .item[active] {
        background: $bg_colorTable;
        opacity: 1;
      }
    }
  }
}
</style>
